// 页面过渡动画
.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: all $transition-duration;
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

// 侧边栏折叠动画
.sidebar-container {
  transition: width $transition-duration;
}

// 菜单折叠动画
.el-menu-collapse-transition {
  transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;
}

// 抽屉动画
.drawer-fade-enter-active,
.drawer-fade-leave-active {
  transition: all $transition-duration;
}

.drawer-fade-enter-from,
.drawer-fade-leave-to {
  opacity: 0;
}

// 缩放动画
.zoom-in-center-enter-active,
.zoom-in-center-leave-active {
  transition: all $transition-duration cubic-bezier(0.55, 0, 0.1, 1);
}

.zoom-in-center-enter-from,
.zoom-in-center-leave-to {
  opacity: 0;
  transform: scaleX(0);
}

// 列表动画
.list-move,
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

// 调整顺序时防止条目重叠
.list-leave-active {
  position: absolute;
} 